<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <title>ZenTxt</title>
<style>
body {  
    margin:0 auto;  
}  
  
/*--navigation wrapper--*/  
#navwrapper {  
    margin:0 auto;  
    background-color: #2D2D2D;  
}  
  
#nav {  
    font-family: Arial, Helvetica, sans-serif;  
    font-size:12px;  
    padding-top:4px;  
}  
  
#nav, #nav ul {  
    padding: 0;  
    margin: 0;  
    list-style: none;  
    font-family: Arial, Helvetica, sans-serif;  
}  
  
/*--main nav links style--*/  
#nav a {  
    display:block;  
    padding:7px 7px 7px 7px;  
    color:#ccc;  
    text-decoration:none;  
}  
  
#nav a.dmenu {  
  
}  
  
#nav a.dmenu:hover {  
    color:#3366CC !important;  
    background-color: #fff !important;  
}  
  
#nav li {  
    float: left;  
}  
  
#nav li {position: relative;}  
  
/* hide from IE, mac */  
#nav li {position: static; width: auto;}  
/* end hiding from IE5 mac */  
  
/*--drop down menu styling--*/  
#nav li ul {  
    position: absolute;  
    display: none;  
    margin-left:-1px;  
    padding-bottom:10px;  
    background-color: #FFFFFF;  
    border: 1px solid #bbb;  
    border-top:none;  
    -moz-box-shadow: 0 0 5px #ddd;  
    -webkit-box-shadow: 0 0 5px #ddd;  
    box-shadow: 0 0 5px #ddd;  
    /*--make it top of all the elements on page, so that it can be visible--*/  
    z-index:5000;  
}  
  
#nav li:hover a, #nav a:focus,  
#nav a:active {  
    padding:7px 7px 7px 7px;  
    color:#fff;  
    background:#444;  
    text-decoration:none;  
}  
  
#nav li ul, #nav ul li  {  
    width: 10em;  
}  
  
/*--drop down menu styling is different from main nav, strict rule--*/  
#nav ul li a  {  
    color: #3366CC !important;  
    border-right: 0;  
}  
#nav ul li a:hover  {  
    color:#3366CC !important;  
    background-color: #eef3fb !important;  
    border-right: 0;  
}  
  
/*--the selected, current item in the navigation menu--*/  
#nav a.current{  
    color:#fff;  
    font-weight:bold;  
    background:#2D2D2D;  
    text-decoration:none;  
    border-top:2px solid #C33;  
    padding-bottom:5px; /*--removing 2px border from 7px padding--*/  
}  
  
#nav a.current:hover{  
    padding-bottom:5px; /*--removing 2px border from 7px padding--*/  
}  
  
#nav li:hover ul {  
    display: block;  
}  
  
#nav li:hover ul a{  
    color: #000000;  
    background-color: transparent;  
}  
  
#nav ul a:hover {  
    background-color: #606060!important;  
    color: #FFFFFF !important;  
}  
  
 /*--used in drop down menu items--*/  
.menuseprator{border-bottom:1px solid #ddd; margin:10px 0 10px 0;}  
  
/*--for showing down arrow in drop down menu item--*/  
.arrowdown{color#eee; font-size:0.5em;}    
  
/*--for the left navigation menu--*/  
.floatleft{float:left;}   
  
/*--for the right options navigation menu--*/  
.floatright{float:right;}  
  
/*--clear all floating, left and right--*/  
.clear{clear:both;}   


textarea {
    resize: none;
    width: 98%;
    height: 93%;
    position: relative;
    top: 0px;
    border: 0px;
    margin: 1%;
//    color: #B0D1E8;
    background-color: transparent;
}
textarea:focus { outline: none; }

</style>
    </head>
    <body>
    <div id="wrapper">
        <div id="navwrapper">  
            <ul id="nav" class="floatleft">  
                <li><a class="current" href="#">Edit</a></li>  
                <li><a href="#">History</a></li>  
                <li><a class="dmenu" href="#">Files <span class="arrowdown">▼</span></a>  
                    <ul>  
                        <li><a href="#">Translate</a></li>  
                        <li><a href="#">Books</a></li>  
                        <li><a href="#">Schoolar</a></li>  
                        <li><a href="#">Blogs</a></li>  
                        <li class="menuseprator"></li>  
                        <li><a href="#">Youtube</a></li>  
                        <li><a href="#">Calender</a></li>  
                        <li><a href="#">Photos</a></li>  
                        <li><a href="#">Documents</a></li>  
                        <li><a href="#">Sites</a></li>  
                        <li><a href="#">Groups</a></li>  
                        <li class="menuseprator"></li>  
                        <li><a href="#">Even More »</a></li>  
                    </ul>  
                </li>  
                <li><a class="dmenu" href="#">Revisions <span class="arrowdown">▼</span></a>  
                    <ul>  
                        <li><a href="#">Translate</a></li>  
                        <li><a href="#">Books</a></li>  
                        <li><a href="#">Schoolar</a></li>  
                        <li><a href="#">Blogs</a></li>  
                        <li class="menuseprator"></li>  
                        <li><a href="#">Youtube</a></li>  
                        <li><a href="#">Calender</a></li>  
                        <li><a href="#">Photos</a></li>  
                        <li><a href="#">Documents</a></li>  
                        <li><a href="#">Sites</a></li>  
                        <li><a href="#">Groups</a></li>  
                        <li class="menuseprator"></li>  
                        <li><a href="#">Even More »</a></li>  
                    </ul>  
                </li>  
            </ul>  
            <ul id="nav" class="floatright">  
                <li><a href="#">user@gmail.com</a></li>  
                <li><a href="#">Settings</a></li>  
                <li><a href="#">Logout</a></li>  
            </ul>  
          
            <br class="clear">  
        </div>  

        <div id="editor">
            <textarea id="zen_text" cols="1" rows="1" id="textarea">Hello World!</textarea>
        </dev>
    </div>
    </body>
</html>
